<template>
  <vPage>
    <v-form ref="formRef" v-bind="tableOptins">
      <template #form="{ form }">
        <el-form
          class="vx-table__form-content"
          :model="form"
          label-align="right"
          label-width="100"
          size="default"
          label-position="top"
        >
          <el-date-picker
            v-model="form.performance_month"
            type="month"
            value-format="YYYY-MM-DD"
            placeholder="绩效月份"
          />

          <el-select
            v-model="form.status"
            collapse-tags
            placeholder="状态"
            clearable
            class="!w-[120px]"
            multiple
          >
            <el-option
              v-for="item of options['assignment.ImagesAssignment']?.[0].statusText"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <VGroup>
            <el-select
              class="selectClass !w-[100px]"
              v-model="form.dateRange.type"
              collapse-tags
              placeholder="创建时间"
            >
              <el-option
                v-for="item in dateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
            <el-date-picker
              v-model="form.dateRange.value"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
              value-format="YYYY-MM-DD HH:mm:ss"
              :default-time="defaultTime()"
            />
          </VGroup>
          <VGroup>
            <el-select class="selectClass !w-[100px]" v-model="form.productName.type">
              <el-option
                v-for="item of productOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
            <multi-input
              clearable
              v-model="form.productName.value"
              style="width: 180px"
              placeholder="批量搜索,一行一个"
            ></multi-input>
          </VGroup>
          <el-select
            v-model="form.is_delay"
            class="!w-[160px]"
            placeholder="是否分配周期内完成"
            clearable
          >
            <el-option
              v-for="item in options['assignment.ImagesAssignment']?.[0].isDelayText"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.is_exceed_task"
            class="!w-[160px]"
            placeholder="是否超额任务"
            clearable
          >
            <el-option
              v-for="item in excessTaskOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.pid"
            class="!w-[160px]"
            placeholder="是否子任务"
            clearable
          >
            <el-option
              v-for="item in subTaskOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <el-select
            v-model="form.priority"
            collapse-tags
            placeholder="任务优先级"
            clearable
            class="!w-[120px]"
            multiple
          >
            <el-option
              v-for="item of options['assignment.ImagesAssignment']?.[0].priorityText"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            ></el-option>
          </el-select>
          <select-personnel
            v-model="form.handle_user"
            :multiple="true"
            placeholder="处理人员"
          ></select-personnel>
          <div class="vx-table__form-handle">
            <el-button type="primary" @click="query">查询</el-button>
            <el-button @click="resetForm">重置</el-button>
          </div>
        </el-form>
      </template>
    </v-form>

    <el-tabs class="px-2" v-model="active">
      <el-tab-pane label="图表" :name="1">
        <div class="overflow-y-auto box">
          <el-row :gutter="16" style="margin-left: 0; margin-right: 0">
            <el-col :span="24" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>累计处理SKU数</span>
                    <svg-icon
                      class=""
                      icon-class="tongji"
                      @click="viewDetails('car_total_sku')"
                    ></svg-icon>
                  </div>
                </template>
                <barEcharts :options="datum.carTotalSKUCount"></barEcharts>
              </el-card>
            </el-col>
            <el-col :span="12" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>任务平均交付天数</span>
                    <svg-icon
                      class=""
                      icon-class="tongji"
                      @click="viewDetails('car_average_day')"
                    ></svg-icon>
                  </div>
                </template>
                <barEcharts :options="datum.carAverageDay"></barEcharts>
              </el-card>
            </el-col>
            <el-col :span="12" class="mb-4">
              <el-card shadow="never">
                <template #header>
                  <div class="card-header text-base flex justify-between items-center">
                    <span>任务SKU数</span>
                    <svg-icon
                      class=""
                      icon-class="tongji"
                      @click="viewDetails('car_sku_count')"
                    ></svg-icon>
                  </div>
                </template>
                <barEcharts :options="datum.carSKUCount"></barEcharts>
              </el-card>
            </el-col>
          </el-row>
        </div>
      </el-tab-pane>
    </el-tabs>
  </vPage>
  <comDetails ref="comDetailsRef" />
</template>
<script name="TaskStatistics-board-electronics" setup>
import VForm from "@/components/VForm/index.vue";
import { getOptions } from "@/api/index";
import {
  dateOptions,
  productOptions,
  excessTaskOptions,
  subTaskOptions,
} from "./data.js";
import barEcharts from "@/components/Echarts/barEcharts";
import barStackEcharts from "@/components/Echarts/barStackEcharts";
import barDatasetEcharts from "@/components/Echarts/barDatasetEcharts";
import comDetails from "./components/comDetails.vue";
import { getCarTotalSKUCount, getCarAverageDay, getCarSKUCount } from "./api/index.js";
import { getCurrentDayNumber } from "@/utils/index.js";

const formRef = ref();
const tableOptins = reactive({
  formConfig: {
    productName: { type: "sku", value: "" },
    dateRange: { type: "create_time", value: [], range: true },
    performance_month: getCurrentDayNumber(),
  },
});

const data = reactive({
  options: {},
  active: 1,
  datum: {
    electronicTotal: null,
    deliveryAverageDay: null,
    taskTypeCount: null,
    oldProductDay: null,
    oldTaskTypeCount: null,
    targetDistributionProportion: {
      title: "",
      seriesData: ["基本目标", "超额目标"],
      yAxisData: [
        [100, 302, 301, 334, 390, 330, 320],
        [320, 132, 101, 134, 90, 230, 210],
      ],
      xAxisData: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
      yAxisName: "单位：分",
    },
    actualAchievement: {
      title: "",
      yAxisData: [
        [100, 302, 301, 334, 390, 330, 320],
        [320, 132, 101, 134, 90, 230, 210],
      ],
      xAxisData: [
        "2015",
        "2016",
        "2017",
        "2018",
        "2019",
        "2020",
        "2021",
        "2022",
        "2023",
        "2024",
        "2025",
      ],
    },
  },
  tableData: [],
  form: null,
});

const { options, active, datum, tableData, form } = toRefs(data);
// 下拉数据
const fetchOption = () => {
  getOptions({ name: ["assignment.ImagesAssignment", "assignment.ImagesTag"] }).then(
    (res) => {
      options.value = res.data;
    }
  );
};
fetchOption();

const query = () => {
  form.value = formRef.value.getQueryForm();
  getBoard();
};

const resetForm = () => {
  formRef.value.resetForm();
  form.value = formRef.value.getQueryForm();
  getBoard();
};

// 统计详情
const comDetailsRef = ref();
const viewDetails = (type) => {
  comDetailsRef.value.open({
    type,
    ...form.value,
  });
};

// 获取图表
const getBoard = async () => {
  form.value = formRef.value.getQueryForm();
  getCarTotalSKUCountList();
  getCarAverageDayList();
  getCarSKUCountList();
  // getAverageDayList();
  // getTaskTypeCountList();
  // getOldProductDayList();
  // getOldTaskTypeCountList();
};

// 工作目标完成情况
const getCarTotalSKUCountList = async () => {
  try {
    const res = await getCarTotalSKUCount(form.value);
    const carTotalSKUCount = {
      title: "",
      yAxisName: "单位：个",
      seriesName: "累计处理SKU数",
      yAxisData: [],
      xAxisData: [],
      axisLabel: { interval: 0, rotate: 30 },
    };
    if (res.data?.length) {
      res.data.forEach((item) => {
        carTotalSKUCount.yAxisData.push(item.count);
        carTotalSKUCount.xAxisData.push(item.text);
      });
    }
    datum.value.carTotalSKUCount = carTotalSKUCount;
  } catch (e) {
    throw Error(e);
  }
};

// 平均交付天数
const getCarAverageDayList = async () => {
  try {
    const res = await getCarAverageDay(form.value);
    const carAverageDay = {
      title: "",
      yAxisName: "单位：天",
      seriesName: "平均交付天数",
      yAxisData: [],
      xAxisData: [],
      axisLabel: { interval: 0, rotate: 30 },
    };
    if (res.data?.length) {
      res.data.forEach((item) => {
        carAverageDay.yAxisData.push(item.day);
        carAverageDay.xAxisData.push(item.text);
      });
    }
    datum.value.carAverageDay = carAverageDay;
  } catch (e) {
    throw Error(e);
  }
};

// 任务类型需求数量
const getCarSKUCountList = async () => {
  try {
    const res = await getCarSKUCount(form.value);
    const carSKUCount = {
      title: "",
      yAxisName: "单位：个",
      seriesName: "任务数",
      yAxisData: [],
      xAxisData: [],
      axisLabel: { interval: 0, rotate: 30 },
    };
    if (res.data?.length) {
      res.data.forEach((item) => {
        carSKUCount.yAxisData.push(item.count);
        carSKUCount.xAxisData.push(item.text);
      });
    }
    datum.value.carSKUCount = carSKUCount;
  } catch (e) {
    throw Error(e);
  }
};

onMounted(() => {
  getBoard();
});
</script>
<style lang="scss" scoped>
.box {
  height: calc(100vh - 250px);
}
:deep(.el-card__header) {
  background: var(--base-table-hover-bg-color);
}
</style>
